<script>
// 批量分组弹窗
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'modifyTask'
})
</script>
<script setup>
import { reqAutoaddGroupings } from '@/api'
import { ref, defineExpose, reactive } from 'vue'
import { toRaw } from '@vue/reactivity'
import { ElMessageBox } from 'element-plus'
const dialogVisible = ref(false)
const form = reactive({
	name: ''
})
let initForm = {}
const formRef = ref()
const show = (val) => {
	console.log('测试', val)
	dialogVisible.value = true
	initForm = toRaw(val)
	form.name = initForm.name
}
const handleClose = (done) => {
	dialogVisible.value = false
}
const onSubmit = (formEl) => {
	if (!formEl) return
	formEl.validate(async (valid) => {
		if (valid) {
			initForm = Object.assign(initForm, toRaw(form))
			const r = await reqAutoaddGroupings(initForm)
			if (r) {
				ElMessage.success('修改成功')
				dialogVisible.value = false
				emits('diaUpdate')
			}
			console.log(initForm, '保存组名接口')
		} else {
			console.log('error submit!')
			return false
		}
	})
}
const rules = reactive({
	name: [
		{ required: true, message: '请输入分组名称', trigger: 'blur' },
		{ min: 1, max: 18, message: '不得超过18个字', trigger: 'blur' }
	]
})
const change = (e) => {}
defineExpose({
	show
})
const emits = defineEmits(['diaUpdate'])
</script>
<template>
	<el-dialog v-model="dialogVisible" title="修改名称" width="30%" :before-close="handleClose">
		<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
			<el-form-item label="分组名称" prop="name">
				<el-input v-model="form.name" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
			</span>
		</template>
	</el-dialog>
</template>
<style scoped>
.dialog-footer button:first-child {
	margin-right: 10px;
}
</style>
